<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask-Dropzone Demo: Click Upload</title>
    {{ dropzone.load_css() }}
    {{ dropzone.style('border: 5px dashed #0087F7; margin: 10px 0 10px; min-height: 400px;') }}
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){

  $("#upload").click(function(){
    $("#loading").show();
    $("#content").hide();
  });
});
    </script>
    <style>
       div#loading {
    width: 350px;
    height: 350px;
    display: none;
    background: url(waiting.gif) no-repeat;
    cursor: wait;
    }
    </style>
</head>
<body>
{{ dropzone.load_js() }}
{{ dropzone.config(custom_init='dz = this;document.getElementById("upload").addEventListener("click", function handler(e) {dz.processQueue();});', custom_options='autoProcessQueue: false, addRemoveLinks: true, parallelUploads: 20,') }}
<!--{{ dropzone.config() }}-->
{{ dropzone.create('/') }}
<div id="loading"></div>
<div id="content">

<button type="button" style="float:right" id="upload" onclick="upload();">Upload</button>
    </div>
</body>

</html>
